<template>
  	<div class="journey">
	   	<div class="journey-header">
			<i class="el-icon-more"></i>
	      	<h3>行程</h3>
	      	<router-link to="/myIndent" class="color">
	      		<p @click="fanh">全部</p>
	      	</router-link>
	    </div>
	    <div class="journey-main">
			<p>您还没有行程</p>
			<p>下单后即可管理您的出行计划</p>
	  	</div>
	  	<div class="journey-footer">
			<h2>—推荐新的行程—</h2>
			<ul>
				<router-link to="/particulars" class="cor">
					<li v-for="value in obj" @click="test(value)">
						<img v-bind:src="value.coverImg" alt="" class="coverImg">
						<h3>{{value.title}}</h3>
						<p>
							<span><img src="../assets/location.png" alt="">{{value.cityName}}</span>
							<span class="price">￥{{value.price}}</span>
						</p>
						<i v-get>{{value.type}}</i>
					</li>
				</router-link>
			</ul>
	  	</div>
  	</div>
</template>

<script>
import $ from 'jquery';
import obj from '../data/journey.json';
export default {
  name: 'journey',
  data () {
    return {
      msg: 'journey',
      obj:obj.data.suggestList,
      type:''
    }
  },
  methods:{
  	test:function(v){
  		localStorage.setItem("name","1");
  		eventBus.value = v;
  	},
  	fanh(){
  		localStorage.setItem("aa","2")
  	}
  },
  directives:{
  		get:{
  			inserted:function(t){
  				if(t.innerHTML == 0){
  					t.innerHTML = '民宿'
  				} else if (t.innerHTML == 1){
  					t.innerHTML = '旅行'
  				} else if(t.innerHTML == 2){
  					t.innerHTML = '活动'
  				}
  			}
  		}
  },
  mounted:function(){
  	
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.color{
	color:black;
	text-decoration: none;
}
.journey{
	width: 100%;
	.journey-header{
		width: 100%;
		height: 60px;
		background-color: white;
	    position: fixed;
	    top:0;
	    left: 0;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 0 20px;
	    box-sizing: border-box;
	    z-index: 999;
	}
	.journey-main{
		width: 100%;
		height: 300px;
		/*background-color: pink;*/
		margin-top: 60px;
		text-align: center;
		padding-top:120px;
		box-sizing: border-box;
		font-size: 18px;
	}
	.journey-footer{
		width: 100%;
		margin-bottom: 65px;
		h2{
			text-align: center;
			font-size: 16px;
			margin:10px 0;
		}
		ul{
			.cor{
				color: black;
				text-decoration: none;
			}
			li{
				width: 100%;
				height: 130px;
				border-top: 1px solid #c5c5c5;
				position: relative;
				.coverImg{
					width: 35%;
					margin: 10px;
					float: right;
				}
				h3{
					margin: 10px 0 0 5px;
				}
				i{
					padding: 5px 10px;
					background-color: rgba(0,0,0,0.7);
					border-radius: 10px;
					color: white;
					font-style:normal;
					right: 13px;
					top:14px;
					position: absolute;
				}
				p{
					position: absolute;
					bottom: 15px;
					left: 10px;
					width: 55%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price{
						color: red;
					}
					img{
						width: 10%;
						vertical-align: middle;
					}
				}
			}
		}
	}
}
</style>